

<!-- 仪表板组件 -->

<template>
  <div ref="chartContainer" :style="{ width: width, height: height }"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";

// 接收的props
const props = defineProps({
  width: {
    type: String,
    default: "400px",
  },
  height: {
    type: String,
    default: "400px",
  },
});

const chartContainer = ref(null);
// 默认数据
const defaultData = {
  value: 95.9, // 仪表盘数值
  min: 0, // 最小值
  max: 100, // 最大值
  color: "#0096ff", // 环形颜色，可按需调整
};

onMounted(() => {
  const chart = echarts.init(chartContainer.value);
  const option = {
    series: [
      {
        type: "gauge",
        startAngle: 225,
        endAngle: -45,
        min: defaultData.min,
        max: defaultData.max,
        progress: {
          show: true,
          width: 20,
          itemStyle: {
            color: defaultData.color,
          },
        },
        detail: {
          formatter: "{value}%",
          fontSize: 36,
          fontWeight: "bold",
          color: "#fff",
        },
        data: [
          {
            value: defaultData.value,
          },
        ],
      },
    ],
  };
  chart.setOption(option);
});
</script>

<style scoped></style>
